<template>
  <div class="account-add">
    <Pane>
      <span slot="title">账号添加</span>
      <div slot="content">
        <!-- 表格 -->
        <el-form :model="accAddForm" :rules="rules" ref="accAddForm">
          <el-form-item label="账号" prop="account">
            <el-input v-model="accAddForm.account"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="accAddForm.password"></el-input>
          </el-form-item>
          <el-form-item label="用户组" prop="userGroup">
            <el-select v-model="accAddForm.userGroup">
              <el-option value="超级管理员">超级管理员</el-option>
              <el-option value="普通管理员">普通管理员</el-option>
            </el-select>
          </el-form-item>
          <!-- 按钮 -->
          <el-form-item>
            <el-button type="primary" size="small" @click="submitForm"
              >添加</el-button
            >
            <el-button type="primary" size="small">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </Pane>
  </div>
</template>

<script>
import Pane from "@/components/Pane/Pane";
import { addAccount } from "@/api/account";
export default {
  components: {
    Pane,
  },
  data() {
    return {
      accAddForm: {
        account: "",
        password: "",
        userGroup: "",
      },
      // 验证规则
      rules: {
        // 账号的规则
        account: [
          { required: true, message: "请输入账号", trigger: "blur" },
          {
            min: 2,
            max: 16,
            message: "用户账号在2-16位数字之间",
            tirgger: "blur",
          },
        ],
        // 密码的规则
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 5,
            max: 16,
            message: "您的密码在5-16位数字之间",
            tirgger: "blur",
          },
        ],
        userGroup: [{ required: true, message: "请选择", trigger: "change" }],
      },
    };
  },
  methods: {
    submitForm() {
      this.$refs.accAddForm.validate(async (valid) => {
        if (valid) {
          let { code } = await addAccount(this.accAddForm);
          if (code === 0) {
            this.$router.push("/account/account-list");
          }
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.el-form-item {
  display: flex;
}
</style>
